import {
  DrawerForm,
  ProFormDependency,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Checkbox, Col, Divider, Row } from 'antd';
import React, { useState } from 'react';
import { useModel } from 'umi';

import {
  AreaGroupOptions,
  getAreaGroupCountrys,
  TernaryEnableState,
} from '@/services/consts';
import { CheckboxValueType } from 'antd/es/checkbox/Group';

type FormProps = {
  visible: boolean;
  defaultProductId: number | undefined;
  current: API.AreaFilter | undefined;
  onCancel: () => void;
  onSubmit: (values: API.AreaFilter) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, defaultProductId, current, onCancel, onSubmit } = props;
  if (!visible) {
    return null;
  }

  let defaultCurrent: Partial<API.AreaFilter> | undefined = undefined;
  if (!current) {
    defaultCurrent = {
      status: true,
      productId: defaultProductId,
    };
  }

  const { getProductOptions, getGeoipIspNameOptions } = useModel(
    'useGlobalModel',
    (model) => ({
      getProductOptions: model.getProductOptions,
      getGeoipIspNameOptions: model.getGeoipIspNameOptions,
    }),
  );

  const productOptions = getProductOptions(false);
  const [checkedList, setCheckedList] = useState<any[]>(current?.areas);

  const onCheckChange = (list: CheckboxValueType[]) => {
    console.log(list);
    setCheckedList(list);
  };

  const handleFormSubmit = async (record: API.AreaFilter) => {
    record.areas = checkedList;
    onSubmit(record);
  };

  return (
    <DrawerForm<API.AreaFilter>
      open={visible}
      autoFocusFirstInput
      width={1000}
      title={`${current ? '编辑' : '添加'}地区策略`}
      initialValues={current ? current : defaultCurrent}
      onFinish={handleFormSubmit}
      drawerProps={{
        onClose: onCancel,
        //destroyOnClose: true,
        maskClosable: false,
      }}
    >
      <Row gutter={24}>
        <Col span={12}>
          <ProFormSelect
            name="productId"
            label="产品"
            options={productOptions}
            rules={[{ required: true, message: '请选择产品' }]}
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name="name"
            label="名称"
            rules={[{ required: true, message: '请输入名称' }]}
            placeholder="请输入名称"
          />
        </Col>
        <Col span={24}>
          <ProFormSelect
            name="areaGroup"
            label="地区分组"
            options={AreaGroupOptions}
            rules={[{ required: true, message: '请选择地区分组' }]}
          />
        </Col>
        <ProFormDependency name={['areaGroup']}>
          {({ areaGroup }) => {
            if (areaGroup) {
              const countrys = getAreaGroupCountrys(areaGroup);
              // console.log(areaGroup, countrys);
              if (countrys && countrys.length > 0) {
                return (
                  <Col span={24}>
                    <Checkbox.Group
                      key="cgAreas"
                      // name="areas"
                      // label="国家地区"
                      // options={countrys}
                      // initialValue={current.areas}
                      value={checkedList}
                      onChange={onCheckChange}
                      style={{ marginBottom: 30 }}
                    >
                      <Row>
                        <Col span={24}>国家地区</Col>
                        {countrys.map((val) => {
                          return (
                            <Col span={4}>
                              <Checkbox value={val}>{val}</Checkbox>
                            </Col>
                          );
                        })}
                      </Row>
                    </Checkbox.Group>
                  </Col>
                );
              }
            }
            return <></>;
          }}
        </ProFormDependency>
      </Row>
      <Row gutter={24}>
        <Col span={12}>
          <ProFormSwitch name={['policyConfig', 'disable']} label="地区禁用" />
        </Col>
        <Col span={6}>
          <ProFormSwitch
            name={['policyConfig', 'udpDisable']}
            label="免费用户禁用UDP"
          />
        </Col>
        <Col span={6}>
          <ProFormSwitch
            name={['policyConfig', 'vipUdpDisable']}
            label="VIP用户禁用UDP"
          />
        </Col>
        <Col span={12}>
          <ProFormSelect
            name={['policyConfig', 'tokenActivation']}
            label="客户端Token激活功能"
            options={TernaryEnableState}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={12}>
          <ProFormTextArea
            name={['policyConfig', 'defaultDnsServers']}
            label="DefaultDnsServers"
            placeholder="请输入DefaultDnsServers列表"
            fieldProps={{ rows: 4 }}
          />
        </Col>
        <Col span={12}>
          <ProFormTextArea
            name={['policyConfig', 'apiUrls']}
            label="API列表"
            placeholder="请输入API列表"
            fieldProps={{ rows: 4 }}
          />
        </Col>
        <Col span={12}>
          <ProFormTextArea
            name={['policyConfig', 'routers']}
            label="Router列表"
            placeholder="请输入Router列表"
            fieldProps={{ rows: 4 }}
          />
        </Col>
        <Col span={12}>
          <ProFormTextArea
            name={['policyConfig', 'cdnRouters']}
            label="CDNRouter列表"
            placeholder="请输入CDNRouter列表"
            fieldProps={{ rows: 4 }}
          />
        </Col>
        <Col span={12}>
          <ProFormTextArea
            name={['policyConfig', 'vipRouters']}
            label="VIP Router列表"
            placeholder="请输入VIP Router列表"
            fieldProps={{ rows: 4 }}
          />
        </Col>
        <Col span={12}>
          <ProFormTextArea
            name={['policyConfig', 'vipCdnRouters']}
            label="VIP CDNRouter列表"
            placeholder="请输入VIP CDNRouter列表"
            fieldProps={{ rows: 4 }}
          />
        </Col>
        <Col span={24}>
          <ProFormSelect
            name={['policyConfig', 'isp1']}
            label="ISP运营商"
            mode="multiple"
            options={getGeoipIspNameOptions()}
          />
        </Col>
        <Col span={12}>
          <ProFormTextArea
            name={['policyConfig', 'isp1Routers']}
            label="运营商Router列表"
            placeholder="请输入运营商Router列表"
            fieldProps={{ rows: 4 }}
          />
        </Col>
        <Col span={12}>
          <ProFormTextArea
            name={['policyConfig', 'isp1CdnRouters']}
            label="运营商CDN Router列表"
            placeholder="请输入运营商CDN Router列表"
            fieldProps={{ rows: 4 }}
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'contactUrl']}
            label="联系我们链接"
          />
        </Col>
        <Col span={12}>
          <ProFormText name={['policyConfig', 'payUrl']} label="官网购买链接" />
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'inviteUrl']}
            label="注册邀请链接"
          />
        </Col>
        <Col span={12}>
          <ProFormText name={['policyConfig', 'faqUrl']} label="FAQ链接" />
        </Col>
        <Col span={12}>
          <ProFormText name={['policyConfig', 'tgUrl']} label="Telegram链接" />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'payButton1Label']}
            label="购买按钮-1-文本"
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'payButton1Url']}
            label="购买按钮-1-URL"
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'payButton2Label']}
            label="购买按钮-2-文本"
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'payButton2Url']}
            label="购买按钮-2-URL"
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <Divider plain>Action按钮-1</Divider>
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'actionButton1Label']}
            label="Action按钮-1-文本"
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'actionButton1Url']}
            label="Action按钮-1-URL"
          />
        </Col>
        <Col span={24}>
          <ProFormText
            name={['policyConfig', 'actionButton1Icon']}
            label="Action按钮-1-图标"
          />
        </Col>
        <Col span={24}>
          <Divider plain>Action按钮-2</Divider>
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'actionButton2Label']}
            label="Action按钮-2-文本"
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'actionButton2Url']}
            label="Action按钮-2-URL"
          />
        </Col>
        <Col span={24}>
          <ProFormText
            name={['policyConfig', 'actionButton2Icon']}
            label="Action按钮-2-图标"
          />
        </Col>
        <Col span={24}>
          <Divider plain>Action按钮-3</Divider>
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'actionButton3Label']}
            label="Action按钮-3-文本"
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'actionButton3Url']}
            label="Action按钮-3-URL"
          />
        </Col>
        <Col span={24}>
          <ProFormText
            name={['policyConfig', 'actionButton3Icon']}
            label="Action按钮-3-图标"
          />
        </Col>
        <Col span={24}>
          <Divider plain>Action按钮-4</Divider>
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'actionButton4Label']}
            label="Action按钮-4-文本"
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'actionButton4Url']}
            label="Action按钮-4-URL"
          />
        </Col>
        <Col span={24}>
          <ProFormText
            name={['policyConfig', 'actionButton4Icon']}
            label="Action按钮-4-图标"
          />
        </Col>
        <Col span={24}>
          <Divider plain>Action按钮-5</Divider>
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'actionButton5Label']}
            label="Action按钮-5-文本"
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name={['policyConfig', 'actionButton5Url']}
            label="Action按钮-5-URL"
          />
        </Col>
        <Col span={24}>
          <ProFormText
            name={['policyConfig', 'actionButton5Icon']}
            label="Action按钮-5-图标"
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <ProFormSwitch name="status" label="状态" />
        </Col>
        <Col span={24}>
          <ProFormTextArea name="remark" label="备注" />
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default Form;
